<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" ref="mytext">
        <button @click="handleAdd">add</button>
        <child ref="mychild"></child>
    </div>
   
    <script type="text/javascript">

        //子组件
        Vue.component("child",{
          template:`<div>
            child  
          </div>`,

          data(){
            return {
              childname:"奉先"
            }
          },
          methods:{
            add(data){
              console.log("子组件的方法",data)
            }
          }
        })
      
        var vm = new Vue({
          el:"#box",
          data:{

          },
          methods: {
            handleAdd(){
              // console.log("mytext=",this.$refs.mytext);
              // console.log("mychild=",this.$refs.mychild);

              console.log("input value=",this.$refs.mytext.value)
              console.log("1111",this.$refs.mychild.childname)
              this.$refs.mychild.add("孩子听话");
            }
          },
        })
      
        /*
          1. ref放在标签上， 拿到的是原生节点
          2. ref放在组件上， 拿到的是组件对象
        */
    </script>
</body>
</html>